<!DOCTYPE html>
<html lang="zh">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>日志管理</title>
  <link href="../../css/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../../laydate/laydate.js"></script>
  <script type="text/javascript" src="../../js/api.js"></script>
  <script type="text/javascript" src="../../js/axios.js"></script>
  <script type="text/javascript" src="../../js/jquery.js"></script>
  <script type="text/javascript" src="../../js/system/logs/logList.js"></script>
  <script type="text/javascript" src="../../js/commons/messageInfo.js"></script>

  <script type="text/javascript" src="../../js/commons/react.js"></script>
  <script type="text/javascript" src="../../js/commons/reactDom.js"></script>
  <script type="text/javascript" src="../../js/commons/babel.js"></script>
  <script type="text/javascript" src="../../js/commons/antd.js"></script>
  <link href="../../css/antd.css" rel="stylesheet" />

  <script type="text/javascript">
    let page = 1, size = 20
    let obj = {}
  </script>
</head>

<body>
  <div class="place"> <span>位置：</span>
    <ul class="placeul">
      <li><a href="../users/userList.html">系统管理</a></li>
      <li><a href="#">日志管理</a></li>
    </ul>
  </div>
  <div class="rightinfo" id="rightInfo">
    <form>
      <ul class="tools">
        <li> <label>员工编号:</label>
          <input type="text" id="uid" />
        </li>
        <li> <label>员工姓名:</label>
          <input type="text" id="userName" />
        </li>
        <li> <label>日志内容：</label>
          <input type="text" id="logText" />
        </li>
        <li> <label>操作模块：</label>
          <input type="text" id="model" />
        </li>
        <li> <label>记录时间:</label>
          <input type="text" class="laydate-icon" id="logStartTime" />
          <label>-</label>
          <input type="text" class="laydate-icon" id="logEndTime" />
        </li>
        <li class="subBut" id="subBut"><img src="../../images/t06.png" />查询</li>
      </ul>
      <table class="tablelist">
        <thead>
          <tr>
            <th>序号</th>
            <th>员工编号</th>
            <th>员工姓名</th>
            <th>操作模块</th>
            <th>日志内容</th>
            <th>记录时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="tbody">

        </tbody>
      </table>
      <div class="pagin" id="pagination">

      </div>
    </form>
  </div>

  <script type="text/babel">

    const Component = () => {
      const [total, setTotal] = React.useState(0);
      const [current, setCurrent] = React.useState(1);

      React.useEffect(() => {
        getData(page, size, setTotal, obj)

        $('#subBut').click(() => {
          let uid = $('#uid').val()
          let userName = $('#userName').val()
          let logText = $('#logText').val()
          let model = $('#model').val()
          let start = $('#logStartTime').val()
          let end = $('#logEndTime').val()
          obj = { uid, uname: userName, content: logText, model, start, end }
          getData(page, size, setTotal, obj)
        })

      }, [])

      const onChange = (pageNum, sizeNum) => {
        page = pageNum
        size = sizeNum
        setCurrent(pageNum)
        getData(pageNum, sizeNum, setTotal, obj)
      }

      return (
        <antd.Pagination
          current={current}
          showQuickJumper
          showSizeChanger
          defaultPageSize={20}
          total={total}
          onChange={onChange}
          showTotal={(total) => `Total ${total} items`} />
      )
    }
    ReactDOM.createRoot(document.querySelector('#pagination')).render(<Component />)
    $('.tablelist tbody tr:odd').addClass('odd');
  </script>

  <script type="text/javascript">
    appendMsgBox()
    var start = {
      elem: '#logStartTime',
      format: 'YYYY-MM-DD hh:mm:ss',
      max: '2099-06-16', //最大日期
      istime: true,
      istoday: false,
      choose: function (datas) {
        end.min = datas; //开始日选好后，重置结束日的最小日期
        end.start = datas; //将结束日的初始值设定为开始日
      }
    };

    var end = {
      elem: '#logEndTime',
      format: 'YYYY-MM-DD hh:mm:ss',
      max: '2099-06-16',
      istime: true,
      istoday: false,
      choose: function (datas) {
        start.max = datas; //结束日选好后，充值开始日的最大日期
      }
    };
    laydate.skin('molv');//切换皮肤，请查看skins下面皮肤库
    laydate(start);
    laydate(end);
  </script>
</body>

</html>